<template>
  <div class="note_list">
    <ul>
      <li
        v-for="item in labelList"
        :key="item.id"
      >
        <a
          href="javascript:void(0);"
          @click="clickFn(item)"
        >
          <p class="note_time">{{ item.created_at.slice(0, 10) }}</p>
          <p class="note_text">
            {{ delHtmlTag(item.content) }}
          </p>
          <span></span>
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  props: {
    labelList: {
      type: Array,
      default: () => {}
    }
  },
  data() {
    return {
      arr: [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17]
    }
  },
  methods: {
    // 去掉html字符串中的所有标签元素
    delHtmlTag(str) {
      return str.replace(/<[^>]+>/g, '')
    },
    clickFn(v) {
      this.$router.push({
        path: '/xianyansuiyu',
        query: {
          id: v.id
        }
      })
      this.$emit('getData')
      // this.$router.go(0);
    }
  }
}
</script>

<style lang="scss" scoped>
@media only screen and (max-width: 768px) {
  body .note_list ul li {
    width: 33.3333%;
  }
}
@media only screen and (max-width: 480px) {
  body .note_list ul li {
    width: 100%;
  }
}

.note_list {
  ul {
    // overflow: hidden;
    li {
      width: 25%;
      float: left;
      // margin-left: 10px;
      a {
        display: block;
        padding: 20px;
        margin: 30px auto;
        border-radius: 3px;
        background: #fff;
        box-shadow: #dddddd 3px 5px 5px;
        width: 200px;
        height: 200px;
        transform: rotate(-10deg);
        position: relative;
        color: #333;
        transition: 0.2s;
        .note_time {
          font-size: 14px;
          color: #999;
          margin-bottom: 10px;
        }
        .note_text {
          line-height: 30px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 5;
          overflow: hidden;
        }
        span {
          position: absolute;
          width: 50px;
          height: 50px;
          bottom: 5px;
          right: 5px;
          background: url(../assets/bq5.png) no-repeat;
          background-size: 48px;
        }
      }
    }
  }
  ul li:nth-child(even) a {
    transform: rotate(10deg);
    top: 10px;
    background: rgb(255, 255, 205);
  }
  ul li:nth-child(3n) a {
    transform: rotate(-5deg);
    top: -10px;
    background: rgb(254, 201, 227);
  }
  ul li:nth-child(5n) a {
    transform: rotate(8deg);
    top: -10px;
    background: rgb(210, 251, 253);
  }
  ul li a:hover {
    transform: rotate(0);
    transform: scale(1.1);
    // box-shadow: #5f5f5f 3px 5px 5px;
    // box-shadow: 0 0 10px #A2A0A0;
    // border-radius: 8px;
    box-shadow: 8px 8px 16px #cccbcb, -8px -8px 16px #ffffff;
    z-index: 999;
  }
}
</style>
